<template>
    <div class="mailListContainer">
        <el-dialog
            title="单位通讯录"
            :visible.sync="dialogMailList"
            width="30%"
            :before-close="handleClose">
            <div class="city_body">
                <div class="city_list" id="scrollBody">
                    <div class="city_sort"  ref="city_sort" >
                        <div v-for="item in cityList" :key="item.title">
                            <h2>{{ item.title }}</h2>
                            <ul>
                                <!-- 数据重复 -->
                                <li v-for="(itemList,index) in item.group" :key="index">{{ itemList.user_name }}</li>
                            </ul>
                        </div>	
                    </div>
                </div>
                <div class="city_index">
                    <ul>
                        <li v-for="(item,index) in cityList" :key="item.title" @click="handleToIndex(index)">{{ item.title }}</li>
                    </ul>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleClose">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {sort} from './sort.js';
import { createNamespacedHelpers } from 'vuex';
const { mapState} = createNamespacedHelpers('homeModule');
export default {
    name: 'MailList',
    props:['dialogMailList'],
    data () {
        return {
            cityList : [],
            hotList : [],
            ops: {
                rail: {
                    opacity: '0',
                },
                bar: {
                    onlyShowBarOnScroll: false,
                    background: '#c6c6c6',
                    size: '3px',
                    right:0
                },
            },
            marginTop:0
        };
    },
    computed: {
        ...mapState(['userDetail'])
    },
    mounted(){
        this.$axios.get('/df/userConfig/page?belongType=002&belongOrg='+this.userDetail.agencyId+'&pageSize=999&currentPage=1')
            .then(res => {
                console.log(res.data.data);
                this.cityList = sort(res.data.data.list);
            });
        // this.$axios.get('/portal/data-gd/mail.json')
        //     .then(res => {
        //         this.cityList = res.data;
        //     });
    },
    methods: {
        handleClose(){
            // 子组件调用父组件的方法
            this.$parent.closeALL();
        },
        // 滚动到指定位置
        handleToIndex(index){ //点击左侧字母跳到对应的内容块
            let h2 = this.$refs.city_sort.getElementsByTagName('h2');
            const document = process.client ? document : {};
            document.getElementById('scrollBody').scrollTop = h2[index].offsetTop;
        },
        
    },
};
</script>

<style  scoped>
.mailListContainer  .el-dialog__body{
        height: 300px;
        overflow-y: auto;
    }
.mailListContainer  .el-dialog__body{padding: 0 !important;}
.city_body{ margin-top: 45px; display: flex; width:100%; position: absolute; top: 0; bottom: 0;}
.city_body .city_list{ flex:1; overflow: auto; background: #FFF5F0;}
.city_body .city_list::-webkit-scrollbar{
    background-color:transparent;
    width:0;
}
.city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}
/* .city_body .city_sort div{ margin-top: 20px;} */
.city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_sort ul{ padding-left: 10px; margin-top: 10px;}
.city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
.city_body .city_index{ width:20px; display: flex; flex-direction:column; justify-content:center; text-align: center; border-left:1px #e6e6e6 solid;cursor: pointer;}
</style>
